<template>
  <div>
    <!-- <h1>菜单</h1> -->
    <el-bread></el-bread>

    <el-button type="primary" plain size="small"  @click="add"  >添加</el-button>
     <v-list  @edit='edit'></v-list>
     <v-dialog :dialogInfo='dialogInfo'  ref='diaInfo' @cancel='cancel'></v-dialog>
                                          <!-- ref='diaInfo'  获取v-dialog子组件上的属性和方法 -->
  </div>
</template>

<script>
import vList  from  './list'
import vDialog from './dialog'
export default {
  data() {
    return {
           dialogInfo:{
             isShow:false,
             isAdd:true
           }
    };
  },
  components: {
      vList,
      vDialog
  },
  methods: {
    add(){
      this.dialogInfo.isShow=true
      this.dialogInfo.isAdd=true
    },
    cancel(e){
      this.dialogInfo.isShow=e
    },
    edit(e){   //e就是id
      this.dialogInfo.isShow=true
      this.dialogInfo.isAdd=false
                                              //  id来自于list
      this.$refs.diaInfo.lookup(e)         //把e传给子组件
    }
   
  }
};
</script>

<style lang="" scoped>
.el-button {
  margin: 10px  5px;
}
</style>
